<template>
    <div class="activity_container container">
        <search-bar  :placeholder="placeholder" :pageParam="pageParam" :url="url" :inputPlaceholder="inputPlaceholder"></search-bar>
        <div class="img_container">
            <mt-swipe :auto="8000" v-if="bannerList.length !==0">
                <mt-swipe-item v-for="(item) in bannerList" :key="item.id" @click.native="turnToPage(item.id)">
                    <div  class="carousel">
                        <img :src="item.attachments" alt="">
                        <p> {{item.theme}}</p>
                    </div>
                </mt-swipe-item>
            </mt-swipe>
        </div>
                <div class="main-body" ref="wrapper"  style="height: calc(100vh - 6rem)">
                    <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore"
                                 :autoFill="isAutoFill">
                        <ul class="mui-table-view mui-grid-view">
                            <li v-for="item in listData" :key="item.id"  @click="turnToPage(item.id)" style="margin-top: 0">
                                <div class="img_box">
                                    <img :src="item.attachments " alt="">
                                </div>
                                <div class="content ">
                                    <h3>{{item.theme}}</h3>
                                    <p class="detail">{{item.description }}</p>
                                    <p class="time">{{item.activityDate}}</p>
                                </div>
                            </li>
                        </ul>
                    </mt-loadmore>
                </div>
    </div>
</template>

<script>
    import searchBar from '@/components/searchBar'
    import BASE_URL from '@/api/url'
    import {pullDown} from './common/mixin'
    export default {
        name: "notice",
        mixins:[pullDown],
        components: {searchBar},
        data() {
            return {
                placeholder:'通知公告',
                inputPlaceholder:'搜索公告名称',
                pageParam: {
                    page: 1,
                    size: 10
                },
                url:'/weixin/notice/list',
                listData: [],
                bannerList:[],
                //可以进行上拉
                allLoaded: false,
                wrapperHeight: 0,
                totalNum: null,
                //是否自动触发上拉函数
                isAutoFill: false,
                allCount: null,
                oncomingCount: null,
                pastCount: null,
                pageType:'notice'
            }
        },
        activated(){
            this.fetchData();
            this.getBanner();
        },
        created(){
            document.title = '通知公告';
            this.fetchData();
            this.getBanner();
        },
        methods:{
            fetchData(){
                this.$get('/weixin/notice/list',this.pageParam).then(data=>{
                    if (!(data.data.totalNum > data.data.currentPage * data.data.pageSize)) {
                        this.allLoaded = true; // 若数据已全部获取完毕
                    }
                    this.listData = data.data.items.map((item) => {
                        return {
                            activityDate: item.activityDate,
                            attachments: `${BASE_URL}/${item.attachments}`,
                            browseCount: item.browseCount,
                            id: item.id,
                            theme: item.theme,
                            description: item.description,
                            praiseCount: item.praiseCount
                        }
                    });
                })

            },

        }
    }
</script>

<style scoped>

</style>